<template>
  <LoadPage :show="show"/>
  <view class="main">
    <view class="tab">
      <nut-tabs title-scroll @change="changeTabs" v-model="current" swipeable align="center" custom-color="#FB4E47"
                :ellipsis="false">
        <nut-tab-pane title="全部">
          <orderList :data="dataList"/>
        </nut-tab-pane>
        <nut-tab-pane title="待支付">
          <orderList :data="dataList" @status="state => current = state"/>
        </nut-tab-pane>
        <nut-tab-pane title="待施工">
          <orderList :data="dataList"/>
        </nut-tab-pane>
        <nut-tab-pane title="进行中">
          <orderList :data="dataList"/>
        </nut-tab-pane>
        <nut-tab-pane title="已完工">
          <orderList :data="dataList"/>
        </nut-tab-pane>
        <nut-tab-pane title="已取消">
          <orderList :data="dataList"/>
        </nut-tab-pane>
      </nut-tabs>
      <LoadMore :status="status"/>

    </view>
  </view>
</template>

<script setup>
import {ref, reactive} from 'vue';
import orderList from './components/orderList.vue';
import {getOrderList} from '@/api/apiList';
import {onLoad, onReachBottom, onPullDownRefresh} from '@dcloudio/uni-app';

const dataList = ref([])
let queryTwo = reactive({
  pageNum: 1,
  pageSize: 8,
  status: ''
})
let status = ref('noMore')
let show = ref(true)
const getDataList = async () => {
  status.value = 'loading';
  const res = await getOrderList(queryTwo)
  if (res.code == 200) {
    if (res.rows.length) {
      dataList.value = [...dataList.value, ...res.rows]
      status.value = 'noMore'
    } else {
      status.value = 'noMore'
    }
    show.value = false
  }

}

const s = ref('')
const changeTabs = ({paneKey}) => {
  console.log(paneKey,'pa')
  queryTwo.pageNum = 1
  dataList.value = []
  if (paneKey == 0) s.value = ''
  if (paneKey == 1) s.value = 0
  if (paneKey == 2) s.value = 1
  if (paneKey == 3) s.value = 2
  if (paneKey == 4) s.value = 3
  if (paneKey == 5) s.value = 4
  queryTwo.status = s.value
  getDataList()
}


onReachBottom(() => {
  queryTwo.pageNum++
  getDataList()
})

onPullDownRefresh(async () => {
  uni.showLoading({
    title: '加载中',
    icon: 'none'
  })
  dataList.value = []
  queryTwo.pageNum = 1
  await getDataList()
  uni.stopPullDownRefresh()
  uni.hideLoading()
})


let current = ref(0)
onLoad((option) => {
  current.value = Number(option.status) + 1
  queryTwo.status = current.value - 1
  getDataList()
})

</script>
<style lang="scss" scoped>
:deep(.nut-tab-pane) {
  background-color: transparent;
}
</style>